<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-01-25 16:03:45
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-27 10:58:30
 * @FilePath     : \\tms-obc-web\\src\\app\\shared\\components\\dynamic-setting\\dynamic-setting-h5\\dynamic-setting-h5.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<nz-card [nzLoading]="service.http.loading">
    <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="tabSpan">
            <ul nz-menu nzMode="inline" class="card-height">
                <li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(item)"
                    *ngFor="let item of tabs; let idx = index">
                    {{ item.name }}
                </li>
            </ul>
        </div>

        <div nz-col [nzSpan]="24-tabSpan" style="overflow: scroll">
            <nz-card class="card-height" [nzBordered]="null" nzSize="small">
                <h2 style="font-weight: 800;">{{selectedTab?.name}}</h2>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24" se-container [labelWidth]="labelWidth">
                        <se [label]="item.name" *ngFor="let item of configList" col="1" [required]="item.requiredField">
                            <ng-container [ngSwitch]="item.itemType">
                                <!-- 整型输入框 -->
                                <ng-container *ngSwitchCase="1">
                                    <nz-input-group [nzAddOnAfter]="item.remark?.afterLable" style="width: 155px;"
                                        class="ml-md mr-xl">
                                        <nz-input-number [(ngModel)]="item.itemValue" [nzMin]="item.remark?.min"
                                            [nzPrecision]="item.remark?.precision" [nzMax]="item.remark?.max"
                                            nzPlaceHolder="请输入" style="width: 120px;"></nz-input-number>
                                        <!-- <input type="number" nz-input [(ngModel)]="item.itemValue" placeholder="请输入"/> -->
                                    </nz-input-group>
                                </ng-container>
                                <!-- 0-1单选框 -->
                                <ng-container *ngSwitchCase="2">
                                    <nz-radio-group [(ngModel)]="item.itemValue" class="mr-xl">
                                        <label nz-radio [nzValue]="0" class="ml-xl">{{item.remark?.[0] || '否'}}</label>
                                        <label nz-radio [nzValue]="1" class="ml-xl">{{item.remark?.[1] || '是'}}</label>
                                    </nz-radio-group>
                                </ng-container>
                                <!-- 时间选择器 -->
                                <ng-container *ngSwitchCase="3">
                                    <nz-time-picker nzFormat="HH:mm" nzPlaceHolder="请选择时间" [(ngModel)]="item.itemValue"
                                        class="ml-md mr-xl">
                                    </nz-time-picker>
                                </ng-container>
                                <!-- 时间段选择器 -->
                                <ng-container *ngSwitchCase="5">
                                    <div class="d-flex" style="align-items: center;justify-content: space-between;">
                                        <input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
                                            style="margin-left: 23px;">
                                        <label class="ml-sm mr-sm"> --</label>
                                        <input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
                                            style="margin-left: 0;" class=" mr-xl">
                                    </div>
                                </ng-container>
                                <!-- 单选加配置 -->
                                <ng-container *ngSwitchCase="6">
                                    <div class="d-flex" style="align-items: center;justify-content: space-between;">

                                        <nz-radio-group [(ngModel)]="item.itemValue.radio" class="mr-xl">
                                            <label nz-radio [nzValue]="0" class="ml-xl">{{item.remark?.[0] ||
                                                '否'}}</label>
                                            <label nz-radio [nzValue]="1" class="ml-xl">{{item.remark?.[1] ||
                                                '是'}}</label>
                                        </nz-radio-group>

                                        <input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
                                            style="margin-left: 23px;">
                                        <label class="ml-sm mr-sm"> --</label>
                                        <input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
                                            style="margin-left: 0;" class=" mr-xl">
                                    </div>
                                </ng-container>
                                <!-- 运费列表 -->
                                <ng-container *ngSwitchCase="7">
                                    <app-freight-table></app-freight-table>
                                </ng-container>
                                <!-- 文本输入框 -->
                                <ng-container *ngSwitchCase="8">
                                    <nz-input-group style="width: 155px;" class="ml-md mr-xl">
                                        <input nz-input placeholder="请输入" [(ngModel)]="item.itemValue" />
                                    </nz-input-group>
                                </ng-container>
                                <!-- 文件上传 -->
                                <ng-container *ngSwitchCase="9">
                                    <nz-upload [nzAction]="service.$api_upload_url" [nzName]="'multipartFile'"
                                        [nzHeaders]="{ authorization: 'authorization-text' }"
                                        [(nzFileList)]="item.itemValue" style="margin-left: 26px;">
                                        <button nz-button>
                                            <i nz-icon nzType="upload"></i>
                                            上传文件
                                        </button>
                                    </nz-upload>
                                </ng-container>
                                <!-- 开关选项 -->
                                <ng-container *ngSwitchCase="10">
                                    <nz-switch [(ngModel)]="item.itemValue" style="margin-left: 26px;"></nz-switch>
                                </ng-container>
                                <!-- 下拉单选 -->
                                <ng-container *ngSwitchCase="11">
                                    <nz-select [(ngModel)]="item.itemValue" style="width: 146px;margin-left: 31px;">
                                        <nz-option [nzValue]="re.value" [nzLabel]="re.label"
                                            *ngFor="let re of item.remark"></nz-option>
                                    </nz-select>
                                </ng-container>
                                <!-- 图片上传 -->
                                <ng-container *ngSwitchCase="12">
                                    <div>
                                        <nz-upload #filst class="avatar-uploader" [nzAction]="service.$api_upload_url"
                                            [nzName]="'multipartFile'" nzName="avatar" nzListType="picture-card"
                                            [nzShowUploadList]="{showPreviewIcon:true,showRemoveIcon:true}"
                                            [nzFileList]="item.itemValue?[{uid:item.id,name:'',url:item.itemValue}]:[]"
                                            (nzChange)="uploadChange($event,item)" [nzLimit]="1"
                                            [nzShowButton]="filst?.nzFileList?.length===0 " [nzPreview]="nzPreview"
                                            [nzRemove]="nzRemove">
                                            <div>
                                                <i class="upload-icon" nz-icon
                                                    [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
                                                <div class="ant-upload-text">上传</div>
                                            </div>
                                            <!-- <div style="width: 102px;height: 102px;display: flex;align-items: center;justify-content: center;"
                                                *ngIf="item.itemValue" (click)="$event.cancelBubble = true">
                                                <img nz-image [nzSrc]="item.itemValue"
                                                    style="max-width: 102px;max-height: 102px;" />
                                            </div> -->
                                        </nz-upload>
                                        <p>支持
                                            <ng-container *ngFor="let item of item.remark?.format">
                                                {{item}},
                                            </ng-container>
                                            格式，文件小于{{item.remark?.size || 2}}M（建议尺寸
                                            {{item.remark?.width || 750}}px * {{item.remark?.height|| 1622}}px）。
                                            <a *ngIf="item.remark?.caseImage"
                                                (click)="showImg(item.remark?.caseImage)">查看示例</a>
                                        </p>
                                    </div>
                                </ng-container>
                                <!-- 文本域 -->
                                <ng-container *ngSwitchCase="13">
                                    <textarea rows="4" nz-input [(ngModel)]="item.itemValue" style="width: 400px;"
                                        [maxlength]="item.remark?.maxLength"
                                        [placeholder]="item.remark?.placeholder || ''"></textarea>
                                </ng-container>
                                <!-- 自定义选项 -->
                                <ng-container *ngSwitchCase="999">
                                    <ng-content select="custom-element"></ng-content>
                                </ng-container>
                            </ng-container>
                        </se>
                    </div>
                </div>
            </nz-card>


            <div class="mb-md save-btn">
                <button class="ml-lg" nz-button nzSize="large" nzType="primary" (click)="saveAction()"
                    *ngIf="selectedTab?.configKey!=='freight' && labelWidth!==0 && isCanSave">保存</button>
            </div>
        </div>
    </div>
</nz-card>